<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="../js/vue.js"></script>
    </head>
    <body>
        <div>
            <span>名称</span>:{{name}}
        </div>
        <script>
          var vm= new Vue({
               el:"div",
               computed:{
                   getname:function(){
                       return "你好"+this.name;
                   }
               },
               watch:{
                   name:function(val){
                       console.log("----name变化",val)
                   }
               },
               data:{
                   name:"hello"
               },
               methods:{
                   info:function(){
                       
                   }
               },
               
               beforeCreate() {
                   console.log("beforeCreate")
                  // console.log(this)
                  // debugger;
               },
               created() {
                   console.log("created")
                   // console.log(this)
                   // debugger;
               },
               beforeMount() {
                   console.log("beforeMount")
                   // console.log(this)
                   // debugger;
               },
               mounted() {
                   console.log("mounted")
                    console.log(this)
                   // debugger;
                   //5s后销毁vue实例 
                /* setTimeout(function(){
                         //这里this指向window 
                         console.log("this>>>",this)
                        // this.$destroy();
                     },5000);*/
                     
                     setTimeout(()=>{
                         //this.$destroy()
                     },5000);
                 },
               beforeUpdate() {
                   console.log("beforeUpdate");
                   console.log("name改变后:",this.name)
                   debugger;
               },
               updated() {
                    console.log("updated");
                    debugger
               },
               beforeDestroy() {
                   console.log("beforeDestroy")
                   debugger
               }
           });
           
           
        </script>
    </body>
</html>
